<template>
	<a-modal v-bind="options" class="wirte-off-bill-dialog">
		<a-layout>
			<a-layout-sider theme="light" style="padding: 0px 20px 10px 20px" width="126">
				<a-typography-paragraph strong>
					<blockquote>操作指引</blockquote>
				</a-typography-paragraph>
				<div class="step-content">
					<a-row class="step-item" v-for="(item, index) in stepConfig.stepList" :key="index">
						<div :class="['step-icon', index <= stepConfig.step ? 'active' : '']">{{ index + 1 }}</div>
						<div class="step-des">{{ item.title }}</div>
						<div class="step-line" v-if="index < stepConfig.stepList.length - 1"></div>
					</a-row>
				</div>
			</a-layout-sider>
			<a-layout-content v-show="distinguishPage" class="wirte-off-bill-body bor-l-1 pad-20">
				<vxe-grid ref="bankRecordGrid" v-bind="bankRecordGridOptions">
					<template #toolbar>
						<vxe-toolbar>
							<template #buttons>
								<a-space size="middle">
									<a-button size="middle" type="primary" @click="downloadExeclMould">
										<download-outlined />
										下载导入模板
									</a-button>
									<a-upload
										v-model:file-list="fileList"
										v-bind="uploadOption"
										list-type="picture"
										:show-upload-list="{showPreviewIcon: true}">
										<a-button size="middle" type="primary">
											<upload-outlined />
											上传银行流水
										</a-button>
										<template #itemRender></template>
									</a-upload>
									<span class="color-faad14">
										<question-circle-outlined v-color="{color: 'warning'}" />
										注：选择Excel文件前，请确保导入的数据与模板的数据项一致。
									</span>
								</a-space>
							</template>
							<template #tools v-if="false">
								<a-button>
									<history-outlined />
									导入记录
								</a-button>
							</template>
						</vxe-toolbar>
					</template>
					<template #top>
						<a-row type="flex" justify="space-between" align="middle">
							<a-typography-paragraph strong>
								<blockquote>银行账单流水</blockquote>
							</a-typography-paragraph>
							<a @click="resetData">
								<sync-outlined />
								重置
							</a>
						</a-row>
					</template>
					<template #payMoney="{row}">
						<span v-color="{color: row.payMoney > 0 ? 'primary' : 'danger'}">{{ row.payMoney }}</span>
					</template>
					<template #pager>
						<vxe-pager
							:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
							v-model:current-page="bankRecordTablePage.current"
							v-model:page-size="bankRecordTablePage.size"
							:total="bankRecordTablePage.total"
							@page-change="handlePageChange"></vxe-pager>
					</template>
				</vxe-grid>
			</a-layout-content>
			<a-layout-content v-show="!distinguishPage" class="wirte-off-bill-body bor-l-1 pad-20">
				<!-- 需要对比的银行流水账单列表 -->
				<vxe-grid ref="compareBillList" v-bind="compareBillGridOptions">
					<template #top>
						<a-row type="flex" justify="space-between" align="middle">
							<a-typography-paragraph strong>
								<blockquote>银行账单流水</blockquote>
							</a-typography-paragraph>
							<a-select
								ref="select"
								size="small"
								style="width: 285px"
								v-model:value="billSelectValue"
								@change="filterBusiness">
								<a-select-option :value="item" v-for="(item, index) in billBusinessOptions" :key="index"></a-select-option>
							</a-select>
						</a-row>
					</template>
					<template #payMoney="{row}">
						<span v-color="{color: row.payMoney > 0 ? 'primary' : 'danger'}">{{ row.payMoney }}</span>
					</template>
					<template #pager>
						<vxe-pager
							:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
							v-model:current-page="bankBillsPage.current"
							v-model:page-size="bankBillsPage.size"
							:total="bankBillsPage.total"
							@page-change="bankBillsHandlePageChange"></vxe-pager>
					</template>
				</vxe-grid>
				<!-- 需要对比的合约账单列表 -->
				<a-row type="flex" justify="space-between" align="middle">
					<a-typography-paragraph strong>
						<blockquote>合约账单</blockquote>
					</a-typography-paragraph>
					<a-col>
						<a-range-picker
							size="small"
							v-model:value="rangeTime"
							value-format="YYYY-MM-DD"
							@change="timeSelect"
							:placeholder="['请输入开始时间', '请输入结束时间']"
							style="margin-right: 10px" />
						<a-select size="small" style="width: 285px" v-model:value="params.enterpriseId" @change="selectContract">
							<a-select-option :value="item.id" v-for="item in contractSelectOptions" :key="item.id">
								{{ item.enterPriseName }}
							</a-select-option>
						</a-select>
					</a-col>
				</a-row>
				<vxe-table
					size="small"
					show-overflow
					ref="compareContractList"
					v-bind="compareContractGridOptions"
					:data="contractListData">
					<vxe-toolbar ref="xToolbar2"></vxe-toolbar>
					<vxe-column type="checkbox" width="50"></vxe-column>
					<vxe-column type="expand" field="billStatus" title="状态" width="115">
						<template #default="{row}">
							<a-tag color="success" v-if="Number(row.notOccurredMoney) === Number(row.occurredMoney)">已结清</a-tag>
							<template v-else>
								<template v-if="isBelowZero(row.notOccurredMoney - row.occurredMoney)">
									<a-tag color="red">待付款</a-tag>
								</template>
								<template v-else>
									<a-tag color="processing">待收款</a-tag>
								</template>
							</template>
						</template>
						<template #content="{row}">
							<vxe-table
								align="center"
								border="none"
								:data="row.billDetailDTOList"
								:show-header="false"
								:edit-config="{trigger: 'click', mode: 'cell', showStatus: true}">
								<vxe-column width="50"></vxe-column>
								<vxe-column width="115"></vxe-column>
								<vxe-column width="136"></vxe-column>
								<vxe-column width="257"></vxe-column>
								<vxe-column width="135" field="feeSubjectValue"></vxe-column>
								<vxe-column width="200">
									<template #default="{row: details}">
										<span>{{ formatRangeTime(details.beginTime, details.endTime) }}</span>
									</template>
								</vxe-column>
								<vxe-column min-width="130">
									<template #default="{row: details}">
										<span v-color="{color: amountColor(details)}">
											{{
												1 === details.feeDirection
													? details.notOccurredMoney
													: `${amountSymbol(details)}${details.notOccurredMoney}`
											}}/
										</span>
										<span v-color="{color: amountColor(details)}">{{ details.occurredMoney }}</span>
									</template>
								</vxe-column>
								<vxe-column min-width="130" align="right" field="verifyMoney" :edit-render="{}">
									<template #default="{row: details}">
										<span v-color="{color: amountColor(details)}">{{ details.verifyMoney }}</span>
									</template>
									<template #edit="{row: details}">
										<a-input-number
											v-model:value="details.verifyMoney"
											:min="0"
											:max="details.notOccurredMoney"
											:precision="2"
											allow-clear
											placeholder="请输入">
											<template #prefix>
												<span v-color="{color: amountColor(details)}">
													{{ amountSymbol(details) }}
												</span>
											</template>
										</a-input-number>
									</template>
								</vxe-column>
							</vxe-table>
						</template>
					</vxe-column>
					<vxe-column field="enterpriseName" title="企业名称" width="136"></vxe-column>
					<vxe-column field="houseAddress" title="房源地址" width="257"></vxe-column>
					<vxe-column field="feeSubjectValue" title="账单摘要" width="135"></vxe-column>
					<vxe-column title="账单周期" width="200">
						<template #default="{row}">{{ formatRangeTime(row.beginTime, row.endTime) }}</template>
					</vxe-column>
					<vxe-column field="notOccurredMoney" title="应收(付)/已收(付)" min-width="130">
						<template #default="{row}">
							<span v-color="{color: isBelowZero(row.notOccurredMoney) ? 'danger' : 'primary'}">
								{{ row.notOccurredMoney }}/
							</span>
							<span v-color="{color: isBelowZero(row.occurredMoney) ? 'danger' : 'primary'}">{{ row.occurredMoney }}</span>
						</template>
					</vxe-column>
					<vxe-column align="right" field="verifyMoney" title="待收(付)未核" min-width="130">
						<template #default="{row}">
							<span v-color="{color: amountColor(row)}">{{ row.verifyMoney }}</span>
						</template>
					</vxe-column>
				</vxe-table>
				<!-- <a-row style="margin: 32px 0px">
					<a-col :span="24">
						<a-typography-paragraph strong>
							<blockquote>账单核对</blockquote>
						</a-typography-paragraph>
					</a-col>
					<a-col :span="24">
						<a-space :size="16">
							<div>
								银行流水总计：
								<span v-color="{color: isBelowZero(countTotal.billTotal) ? 'danger' : 'primary'}">{{ countTotal.billTotal }}</span>
							</div>
							<div>
								合约账单总计：
								<span v-color="{color: isBelowZero(countTotal.contractTotal) ? 'danger' : 'primary'}">{{ countTotal.contractTotal }}</span>
							</div>
							<div>
								差值总计：
								<span v-color="{color: 0 === countTotal.differTotal ? 'primary' : 'danger'}">{{ countTotal.differTotal }}</span>
							</div>
						</a-space>
					</a-col>
				</a-row> -->
				<a-row>
					<a-col :span="24">
						<a-typography-paragraph strong>
							<blockquote>核销意见</blockquote>
						</a-typography-paragraph>
					</a-col>
					<a-col :span="24">
						<a-textarea
							v-model:value="auditComment"
							placeholder="请输入核销意见"
							:showCount="true"
							:maxlength="500"
							:rows="5" />
					</a-col>
				</a-row>
			</a-layout-content>
		</a-layout>
		<template #footer>
			<a-row type="fixed" :justify="stepConfig.step > 2 ? 'space-between' : 'end'">
				<a-space :size="16" v-show="stepConfig.step > 2">
					<div>
						银行流水总计：
						<span v-color="{color: isBelowZero(countTotal.billTotal) ? 'danger' : 'primary'}">{{ countTotal.billTotal }}</span>
					</div>
					<div>
						合约账单总计：
						<span v-color="{color: isBelowZero(countTotal.contractTotal) ? 'danger' : 'primary'}">
							{{ countTotal.contractTotal }}
						</span>
					</div>
					<div>
						差值总计：
						<span v-color="{color: 0 === countTotal.differTotal ? 'primary' : 'danger'}">{{ countTotal.differTotal }}</span>
					</div>
				</a-space>
				<a-row type="fixed" justify="end" v-if="distinguishPage">
					<a-space :size="12">
						<a-button @click="options.onCancel">取消</a-button>
						<a-button type="primary" :disabled="Boolean(isAllowNext)" @click="nextStep">确定流水，进行下一步</a-button>
					</a-space>
				</a-row>
				<a-row type="fixed" justify="end" v-else>
					<a-space :size="12">
						<a-button @click="prevStep">上一步</a-button>
						<a-button type="primary" :disabled="Boolean(submitDisabled)" :loading="loading" @click="submitCheck">
							确认核销
						</a-button>
					</a-space>
				</a-row>
			</a-row>
		</template>
	</a-modal>
</template>

<script lang="ts" setup>
	import {ref, reactive, computed, onMounted, toRef, watch} from 'vue'
	import {VxeGridInstance, VxeGridProps, VxePagerEvents} from 'vxe-table'
	import {authHeader} from 'yuxin-base/src/utils/axios'
	import {message} from 'ant-design-vue'
	import {HistoryOutlined, SyncOutlined, DownloadOutlined, UploadOutlined, QuestionCircleOutlined} from '@ant-design/icons-vue'
	import {financeImport, exportFinanceRecorrd, getContractList, confirmCheck, getEnterpriseList} from '@/api/contract'
	import {cutPage, stepList} from './index'
	import {amountColor, amountSymbol} from 'yuxin-base/src/utils'
	import dayjs from 'dayjs'
	import DATE_FORMAT from 'yuxin-base/src/utils/date'

	// 图片上传地址
	const uploadPicURL = import.meta.env.VITE_SERVER_URL + financeImport
	const emits = defineEmits(['update:visible', 'success'])
	const props = defineProps<{
		visible: boolean
	}>()
	// 流程
	const stepConfig = reactive({
		step: -1,
		stepList
	})
	const loading = ref<boolean>(false)
	const rangeTime = ref([])
	const fileList = ref<any[]>([])
	// 删除后把删除的数据放里面
	const removeBillListData: any = []
	//删除后把删除的合约数据放里面
	const removeContractListData: any = []
	// 表格实例
	const bankRecordGrid = ref<VxeGridInstance>()
	const compareBillList = ref<VxeGridInstance>()
	const compareContractList = ref<VxeGridInstance>()
	// 银行流水总数据源
	const billListData: any = ref([])
	const billListSelections = ref<any[]>([])
	const billSelectValue = ref<string>('')
	const billBusinessOptions = computed(() => {
		const data = [...new Set(billListData.value.map(i => i.enterpriseName))]
		return billListData.value.length ? data : []
	})
	const filterBusiness = (val: string) => {
		// 重置选中 筛选数据 重置分页
		billListSelections.value = []

		bankBillsPage.total = legalBillDataFilter().length
		bankRecordTablePage.current = 1
		compareBillList.value?.reloadData(cutPage(bankRecordTablePage.current, bankRecordTablePage.size, legalBillDataFilter()))
	}
	// 过滤掉有errorinfo和对应筛选的数据
	const legalBillDataFilter = () => {
		return billListData.value.filter(i => i.enterpriseName === billSelectValue.value).filter(i => i.errorInfo.length === 0)
	}
	const params = reactive({
		enterpriseId: '',
		beginTime: '',
		endTime: '',
		attributionType: 1
	})

	// 重置
	const resetData = () => {
		billListData.value = []
		bankRecordGridOptions.data = []
		compareBillGridOptions.data = []
		bankRecordTablePage.total = 0
		bankRecordTablePage.current = 1
		bankBillsPage.total = 0
		bankBillsPage.current = 1
		compareBillList.value?.reloadData([])
		compareContractList.value?.reloadData([])
		stepConfig.step = -1
	}
	// 合约账单总数据源
	const contractListData: any = ref<Array<any>>()
	const contractListSelections = ref<any[]>([])
	const contractSelectOptions = ref<Array<any>>([])
	// 分页配置
	// 第一页
	const bankRecordTablePage = reactive({
		total: 0,
		current: 1,
		size: 10
	})
	// 第二页
	const bankBillsPage = reactive({
		total: 0,
		current: 1,
		size: 10
	})

	// 核销建议
	const auditComment = ref<string>('')
	// 弹窗配置
	const options = reactive({
		width: 1400,
		title: '企业账单核销',
		maskClosable: false,
		centered: true,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		bodyStyle: {maxHeight: '600px', padding: '0px'},
		onCancel: () => {
			emits('update:visible', false)
			emits('success')
		}
	})

	// 计算银行流水总值 合约账单总值 差值
	const countTotal = computed(() => {
		const billTotal = billListSelections.value
			.map(i => i.payMoney)
			.reduce((prev, cur) => {
				return prev + Number(cur)
			}, 0)

		// 取出数据结构
		const getBillDetailDTOList = contractListSelections.value
			.map(i => i.billDetailDTOList)
			.reduce((prev, cur) => {
				return [...prev, ...cur]
			}, [])

		const contractTotal = getBillDetailDTOList
			.map(i => {
				return 1 === i.feeDirection ? i.verifyMoney : 0 - i.verifyMoney || 0
			})
			.reduce((prev, cur) => {
				return prev + Number(cur)
			}, 0)

		const differTotal = billTotal - contractTotal

		return {
			billTotal,
			contractTotal,
			differTotal
		}
	})

	// 是否禁用确定核销
	const submitDisabled = computed(() => {
		return !(billListSelections.value.length && contractListSelections.value.length && 0 === countTotal.value.differTotal)
	})

	// 是否禁用下一步
	const isAllowNext = computed(() => {
		return !billListData.value.length || billListData.value.filter(i => i.errorInfo.length > 0).length
	})

	const formatRangeTime = (start, finish) => {
		const begin = start ? dayjs(start).format(DATE_FORMAT.DATE) : ''
		const end = finish ? dayjs(finish).format(DATE_FORMAT.DATE) : ''
		return `${begin} - ${end}`
	}

	// 是否小于0
	const isBelowZero = (num: any) => {
		return Number(num) < 0
	}

	// 区分是第一页还是第二页
	const distinguishPage = computed(() => {
		// -1 0 1 2 第一页 3 4 5 第二页
		return [-1, 0, 1, 2].includes(stepConfig.step)
	})

	// 确定进行下一步
	const nextStep = () => {
		if (1 !== stepConfig.step) {
			message.warn('请先操作前面步骤')
		} else {
			changeStepConfig(3)
			contractListSelections.value = []
			billSelectValue.value = billBusinessOptions.value[0] || ''
			filterBusiness(billBusinessOptions.value[0])
			if (contractSelectOptions.value.length) {
				params.enterpriseId = contractSelectOptions.value[0].id
			}
			getContractData()
		}
	}

	// 上一步
	const prevStep = () => {
		changeStepConfig(1)
	}

	const getContractData = async () => {
		const res = await getEnterpriseList(params)
		if ('200' === res.code) {
			// 有的金额为空 需要做处理
			res.data.forEach(i => {
				i.verifyMoney = ((i.notOccurredMoney || 0) - (i.occurredMoney || 0)).toFixed(2)
				if (i.billDetailDTOList) {
					i.billDetailDTOList.forEach(j => {
						j.verifyMoney = ((j.notOccurredMoney || 0) - (j.occurredMoney || 0)).toFixed(2)
					})
				}
			})
			contractListData.value = res.data
		}
	}

	const timeSelect = (val: any) => {
		params.beginTime = val[0]
		params.endTime = val[1]
		getContractData()
	}

	const selectContract = (val: any) => {
		getContractData()
	}

	// 表头(第一页的)
	const bankRecordGridOptions = reactive<VxeGridProps>({
		height: '600',
		size: 'small',
		showOverflow: true,
		loading: false,
		align: 'center',
		id: 'id',
		rowConfig: {
			height: 60,
			isHover: true
		},
		columns: [
			{
				title: '企业名称',
				field: 'enterpriseName'
			},
			{
				title: '支付方式',
				field: 'paymentType'
			},
			{
				title: '支付账号',
				field: 'paymentAccount'
			},
			{
				title: '支付时间',
				field: 'payDate',
				formatter: ({cellValue}) => {
					return cellValue ? dayjs(cellValue).format(DATE_FORMAT.DATETIME) : '-'
				}
			},
			{
				title: '支付金额',
				field: 'payMoney',
				align: 'right',
				slots: {
					default: 'payMoney'
				}
			},
			{
				title: '支付流水号',
				field: 'paymentNo'
			},
			{
				title: '备注',
				field: 'remark'
			},
			{
				title: '错误原因',
				field: 'errorInfo',
				formatter: ({cellValue}) => {
					return cellValue.length ? cellValue.join('/') : '-'
				}
			}
		],
		data: []
	})

	// 表头(第二页的银行账单流水)
	const compareBillGridOptions = reactive<VxeGridProps>({
		height: '360',
		showOverflow: true,
		size: 'small',
		id: 'id',
		loading: false,
		align: 'center',
		rowConfig: {
			height: 60,
			keyField: 'id',
			isHover: true
		},
		columns: [
			{type: 'radio', width: 50},
			{
				title: '企业名称',
				field: 'enterpriseName'
			},
			{
				title: '支付方式',
				field: 'paymentType'
			},
			{
				title: '支付账号',
				field: 'paymentAccount'
			},
			{
				title: '支付时间',
				field: 'payDate',
				formatter: ({cellValue}) => {
					return cellValue ? dayjs(cellValue).format(DATE_FORMAT.DATETIME) : '-'
				}
			},
			{
				title: '支付金额',
				field: 'payMoney',
				align: 'right',
				slots: {
					default: 'payMoney'
				}
			},
			{
				title: '支付流水号',
				field: 'paymentNo'
			},
			{
				title: '备注',
				field: 'remark'
			}
		],
		radioConfig: {
			reserve: true,
			strict: false
		},
		onRadioChange({records}: any) {
			getBillDataCheck()
		},
		// onCheckboxChange({records}: any) {
		// 	getBillDataCheck()
		// },
		// checkboxConfig: {
		// 	reserve: true,
		// 	showHeader: false
		// },
		data: []
	})

	// 获取选中的银行流水
	const getBillDataCheck = () => {
		const prevChecks: any = compareBillList.value?.getRadioReserveRecord()
		const currentChecks: any = compareBillList.value?.getRadioRecord()
		billListSelections.value = [].concat(prevChecks || [], currentChecks || [])
	}

	// 表头(第二页的合约账单流水)
	const compareContractGridOptions = reactive<VxeGridProps>({
		height: '360',
		showOverflow: true,
		align: 'center',
		rowConfig: {
			height: 60,
			isHover: true
		},
		onCheckboxChange({records}: any) {
			contractListSelections.value = records
		},
		checkboxConfig: {
			showHeader: false,
			trigger: 'row'
		}
	})

	// 上传配置
	const uploadOption = reactive({
		name: 'file',
		accept: '.xls',
		data: fileList,
		action: uploadPicURL,
		headers: authHeader(),
		showUploadList: false,
		onChange({file, fileList}: any) {
			const {response, status, error, percent = 0} = file

			if (status === 'done') {
				if (response.code === '200') {
					const data = response.data
					bankRecordTablePage.total = data.length
					billListData.value = data
					bankRecordGridOptions.data = cutPage(bankRecordTablePage.current, bankRecordTablePage.size, billListData.value || [])

					message.success('上传成功')
					changeStepConfig(1)
				} else {
					message.error(response.msg)
				}
			} else if (status === 'error') {
				message.error(`上传失败：${error.status}`)
			}
		}
	})

	// 点击下载模块
	const downloadExeclMould = () => {
		exportFinanceRecorrd({}).then((res: any) => {
			const blob = new Blob([res], {
				type: 'application/vnd.ms-excel;charset=utf-8'
			})
			changeStepConfig(0)
			const link = document.createElement('a')
			link.href = window.URL.createObjectURL(blob)
			link.download = '银行流水上传模板.xls'
			link.click()
		})
	}

	// 修改步骤条
	const changeStepConfig = (step: number) => {
		stepConfig.step = step
	}

	// 分页
	const handlePageChange: VxePagerEvents.PageChange = ({currentPage, pageSize}) => {
		bankRecordTablePage.current = currentPage
		bankRecordTablePage.size = pageSize
		bankRecordGridOptions.data = cutPage(currentPage, pageSize, billListData.value)
	}

	const bankBillsHandlePageChange: VxePagerEvents.PageChange = ({currentPage, pageSize}) => {
		bankBillsPage.current = currentPage
		bankBillsPage.size = pageSize
		compareBillGridOptions.data = cutPage(currentPage, pageSize, legalBillDataFilter())
	}

	const reloadBillTable = () => {
		bankRecordGridOptions.data = cutPage(bankBillsPage.current, bankBillsPage.size, billListData.value)
		compareBillGridOptions.data = cutPage(bankRecordTablePage.current, bankRecordTablePage.size, legalBillDataFilter())
		bankBillsPage.total = legalBillDataFilter().length
		bankRecordTablePage.total = billListData.value.length
	}

	// 提交核销
	const submitCheck = () => {
		loading.value = true
		const data = {
			...billListSelections.value[0],
			billDetailDTOList: contractListSelections.value
				.map(i => i.billDetailDTOList)
				.reduce((prev, cur) => {
					return [...prev, ...cur]
				}, []),
			billId: billListSelections.value[0].id,
			auditComment: auditComment.value
		}

		confirmCheck(data)
			.then(res => {
				changeStepConfig(5)
				if ('200' === res.code) {
					message.success('提交核销成功')
					setTimeout(() => {
						billListData.value.forEach((i, index) => {
							if (i.id === billListSelections.value[0].id) {
								billListData.value.splice(index, 1)
							}
						})
						removeBillListData.push(billListSelections.value.shift())
						contractListSelections.value = []

						reloadBillTable()
						getContractData()
						loading.value = false
					}, 1500)
				} else {
					loading.value = false
				}
			})
			.catch(err => {
				loading.value = false
			})
	}

	watch(
		() => props.visible,
		() => {
			resetData()
		}
	)

	onMounted(async () => {
		const getOptionRes = await getContractList({
			size: 1000,
			current: 1
		})
		if ('200' === getOptionRes.code) {
			contractSelectOptions.value = getOptionRes.data.records
		}
	})
</script>

<style lang="less" scoped>
	.wirte-off-bill-body {
		max-height: 600px;
		overflow-y: scroll;
		padding: 10px 20px;
	}
	.color-faad14 {
		color: @warning-color;
	}
	.pad-20 {
		padding: 0 20px;
		box-sizing: border-box;
	}
	.ant-layout {
		background-color: #fff;
	}

	.ant-typography {
		margin-bottom: 0;
	}
	.bor-l-1 {
		border-left: 1px solid @default-color;
	}

	.step-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 30px;
	}

	.step-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.step-icon {
		height: 24px;
		width: 24px;
		background-color: rgba(0, 0, 0, 0.25);
		border-radius: 50%;
		text-align: center;
		line-height: 24px;
		color: #fff;
	}

	.step-icon.active {
		background-color: @primary-color;
	}

	.step-des {
		color: rgba(0, 0, 0, 0.85);
		line-height: 14px;
		font-size: 12px;
		margin: 10px 0 0 0;
	}

	.step-line {
		width: 1px;
		height: 24px;
		background-color: #e9e9e9;
		margin: 10px auto;
	}
</style>
